<template>
  <div>
    <div class="channel-edit">
        <!-- 我的频道 -->
        <van-cell :border="false">
            <div slot="title" class="title-text">我的频道</div>
            <van-button type="info"
                class="edit-btn"
                color="red"
                plain 
                round
                size="mini"
                @click="(isEdit = !isEdit)"
            >{{isEdit ? '完成' : '编辑'}}</van-button>
        </van-cell>
        <van-grid :gutter="10" class="My-grid">
            <van-grid-item 
                v-for="(itemA,index) in Mychannels" 
                class="grid-item"
                :key="index" 
                @click="QandDelChanne(itemA,index)"
            >
                 <!-- 
                    v-bind:class语法
                    一个对象，对象中的key表示要作用的css类名
                             对象中的value要计算除布尔值
                  -->
            <van-icon slot='icon' 
                name="clear"
                v-show="isEdit && !fiexChannels.includes(itemA.id)"
            ></van-icon>      
            <span class="text" 
                slot="text"
                :class="{active: index === active}"
            >{{itemA.name}}</span>
            </van-grid-item>
        </van-grid>

        <!-- 频道推荐 -->
        <van-cell :border="false">
            <div slot="title"  class="title-text">频道推荐</div>
        </van-cell>
        <van-grid :gutter="10"  class="TJ-grid">
            <van-grid-item 
                v-for="(itemZ,index) in recommendChannels" 
                icon="plus"
                class="grid-item"
                :key="index" 
                @click="AddChannel(itemZ)"
                :text="itemZ.name" />
        </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannles , addUserChannel ,deleteUserChannel} from '@/api/channel'
import { mapState } from 'vuex'
import {setItem} from '@/utils/storage'

export default {
    name:'ChannelEdit',
    props:{
        Mychannels:{
            type:Array,
            required:true
        },
        active:{
            type:Number,
            required:true
        }
    },
    data() {
        return {
            allChannels:[], //所有频道
            isEdit:false, //控制编辑显示
            fiexChannels:[0], //强制不能删除的频道
        }
    },
    created(){
        this.loadAllChannels()
    },
    methods:{
        async loadAllChannels(){
            try{
                const {data} = await getAllChannles()
                this.allChannels = data.data.channels
                // console.log(data)
            }catch(err){
                this.$toast('获取数据失败')
            }
        },
        async AddChannel(item){
            this.Mychannels.push(item)
            //数据持久化
            if(this.user){
                try{
                    //登录，把数据请求接口放入线上
                    addUserChannel({
                        id:item.id, //频道ID
                        seq: this.Mychannels.length //序号
                    })
                }catch(err){
                    this.$toast('保存失败，请稍后重试')
                }
                
                
            }else{
                //未登录，把数据存储在本地
                setItem('TOUTIAO_CHANNELS',this.Mychannels)
            }
        },
        QandDelChanne(item,index){
            
            if(this.isEdit){
                if(this.fiexChannels.includes(item.id)){
                    return
                }
                //编辑状态执行删除
                
                //删除频道
                this.Mychannels.splice(index,1)
                if(index <= this.active){
                    //激活频道索引-1
                    this.$emit('update-active',this.active-1,true)
                }
                //处理持久化
                this.deleteChannel(item.id)
            }else{
                //非编辑状态执行切换频道
                this.$emit('update-active',index,false)
            }
            
            
        },
        async deleteChannel(ID){
            try{
                if(this.user){
                    //登录，把数据更新到线上
                    await deleteUserChannel(ID)
                }else{
                    //未登录，把数据更新到本地
                    setItem('TOUTIAO_CHANNELS',this.Mychannels)
                }
            }catch(err){
                this.$toast('操作失败，请稍后重试')
            }
            
        }

    },
    computed:{
        ...mapState(['user']),
        recommendChannels(){
            return this.allChannels.filter(A=>{
                return !this.Mychannels.find(B=>{
                    return B.id===A.id
                })
            })
            // const channelsA = [] //存放频道推荐
            // this.allChannels.forEach(channel=>{
            //     //find遍历数组，找到满足条件的元素项
            //     const resA = this.Mychannels.find(myChannel=>{
            //         return myChannel.id === channel.id
            //     })
            //     //如果我的频道中不包含该频道项，则收集到推荐频道中
            //     if(!resA){
            //         channelsA.push(channel)
            //     }
            // })
            // //把计算结果返回
            // return channelsA
        }
    }
}
</script>

<style lang="less" scoped>
    .channel-edit{
        padding: 85px 0;
        .title-text{
            font-size: 32px;
            color: #333333;
        }
        .edit-btn{
            width: 104px;
            height: 48px;
            font-size: 26px;
            color: #f85959;
            border: 1px solid #f85959;
        }
        /deep/.grid-item{
            width: 160px;
            height: 86px;
            .van-grid-item__content{
                white-space: nowrap;
                background-color: #f4f5f6;
                .van-grid-item__icon-wrapper {
                    position: unset;
                }
                .van-grid-item__text,.text{
                    font-size: 28px;
                    color: #222;
                    margin-top: 0;
                }
                .active{
                    color: #f85959;
                }
            }
           
        }
        /deep/.My-grid{
            .grid-item{
                .van-icon-clear{
                    position: absolute;
                    right: -10px;
                    top: -10px;
                    font-size: 30px;
                    color: #cacaca;
                    z-index: 2;
                }
            }
        }
        /deep/.TJ-grid{
            .grid-item{
                .van-grid-item__content{
                   flex-direction: row;
                   .van-icon-plus{
                    font-size: 28px;
                    margin-right: 6px;
                   }
                }
            }
        }
        
    }
</style>